<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>音乐播放平台</title>
    <style>
        /* 基础样式 */
        * { 
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background: #f0f2f5;
            position: relative;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* 加载提示 */
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #f0f2f5;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: opacity 0.5s;
        }
        
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(0, 123, 255, 0.3);
            border-radius: 50%;
            border-top-color: #007bff;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        #loading-text {
            font-size: 16px;
            color: #333;
        }

        /* 登录界面样式 */
        .login-container {
            width: 90%;
            max-width: 400px;
            margin: 100px auto;
            padding: 30px 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .login-form h2 {
            text-align: center;
            margin-bottom: 25px;
            color: #333;
            font-size: 22px;
        }

        .form-group {
            margin-bottom: 18px;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input[type="text"]:focus,
        input[type="password"]:focus {
            border-color: #007bff;
            outline: none;
        }

        button {
            width: 100%;
            padding: 14px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 17px;
            font-weight: 500;
            transition: background 0.3s;
        }
        
        button:active {
            background: #0062cc;
            transform: translateY(1px);
        }

        /* NFC提示 */
        .nfc-tip {
            text-align: center;
            margin-top: 20px;
            padding: 10px;
            background: #e8f4ff;
            border-radius: 6px;
            color: #007bff;
            font-size: 14px;
            display: none;
        }

        /* 音乐库界面 */
        .music-library {
            display: none; /* 默认隐藏 */
            max-width: 1200px;
            margin: 30px auto;
            padding: 15px;
        }

        .music-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 18px;
            padding: 10px;
        }

        .music-card {
            background: white;
            padding: 18px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .music-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .music-info {
            margin-bottom: 14px;
        }

        .music-info h3 {
            margin-bottom: 6px;
            color: #333;
            font-size: 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .music-info p {
            color: #666;
            font-size: 14px;
        }

        /* 播放控制 */
        .controls {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .play-btn {
            width: 38px;
            height: 38px;
            background: #007bff;
            border-radius: 50%;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .play-btn:active {
            background: #0056b3;
        }

        .time-info {
            font-size: 12px;
            color: #666;
            margin: 0 10px;
            flex-grow: 1;
        }

        /* 进度条 */
        .progress-container {
            width: 100%;
            height: 5px;
            background: #e0e0e0;
            border-radius: 5px;
            margin-bottom: 10px;
            cursor: pointer;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background: #007bff;
            border-radius: 5px;
            width: 0%;
            transition: width 0.1s linear;
        }

        /* 音量控制 */
        .volume-control {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .volume-icon {
            margin-right: 10px;
            color: #666;
            font-size: 14px;
        }

        .volume-slider {
            width: 100%;
            -webkit-appearance: none;
            height: 5px;
            border-radius: 5px;
            background: #e0e0e0;
            outline: none;
        }
        
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #007bff;
            cursor: pointer;
        }
        
        /* 移动端优化 */
        @media (max-width: 600px) {
            .login-container {
                margin: 60px auto;
                padding: 25px 15px;
            }
            
            .music-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .music-card {
                padding: 15px;
            }
            
            button {
                padding: 13px;
            }
        }
        
        /* iOS 提示弹窗样式 */
        #ios-alert {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            display: none;
        }
        
        .alert-content {
            background: white;
            padding: 25px;
            border-radius: 12px;
            max-width: 90%;
            text-align: center;
        }
        
        .alert-content h3 {
            color: #007bff;
            margin-bottom: 15px;
        }
        
        .alert-content p {
            margin-bottom: 20px;
            line-height: 1.5;
        }
        
        .alert-btn {
            padding: 10px 25px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 加载提示 -->
    <div id="loading-overlay">
        <div class="spinner"></div>
        <div id="loading-text">加载中，请稍候...</div>
    </div>
    
    <!-- iOS 提示弹窗 -->
    <div id="ios-alert">
        <div class="alert-content">
            <h3>欢迎使用NFC音乐卡</h3>
            <p>您正在通过NFC访问我们的音乐平台，请点击下方按钮开始体验</p>
            <button class="alert-btn">开始体验</button>
        </div>
    </div>

    <!-- 登录界面 -->
    <div class="login-container">
        <form class="login-form" id="loginForm">
            <h2>用户登录</h2>
            <div class="form-group">
                <input type="text" id="username" placeholder="用户名" required>
            </div>
            <div class="form-group">
                <input type="password" id="password" placeholder="密码" required>
            </div>
            <button type="submit">登录</button>
            <div class="nfc-tip" id="nfcTip">通过NFC卡片访问的用户可直接登录</div>
        </form>
    </div>

    <!-- 音乐库界面 -->
    <div class="music-library" id="musicLibrary">
        <div class="music-grid" id="musicGrid"></div>
    </div>

    <script>
        // 检测NFC访问
        function detectNfcAccess() {
            // 如果是iOS设备，显示提示弹窗
            if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
                document.getElementById('ios-alert').style.display = 'flex';
                
                // 点击弹窗按钮
                document.querySelector('.alert-btn').addEventListener('click', function() {
                    document.getElementById('ios-alert').style.display = 'none';
                    document.getElementById('nfcTip').style.display = 'block';
                });
            } else {
                document.getElementById('nfcTip').style.display = 'block';
            }
            
            // 自动填写用户名
            document.getElementById('username').value = 'NFC访客';
            document.getElementById('password').value = 'nfc123';
        }
        
        // 页面加载完成后执行
        window.addEventListener('DOMContentLoaded', function() {
            // 隐藏加载提示
            setTimeout(function() {
                document.getElementById('loading-overlay').style.opacity = '0';
                setTimeout(function() {
                    document.getElementById('loading-overlay').style.display = 'none';
                }, 500);
            }, 800);
            
            // 检查URL中是否有nfc参数
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.has('nfc')) {
                detectNfcAccess();
            }
        });

        // 登录处理
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // 简单验证
            if(username && password) {
                // 显示加载提示
                document.getElementById('loading-overlay').style.display = 'flex';
                document.getElementById('loading-overlay').style.opacity = '1';
                
                setTimeout(function() {
                    document.querySelector('.login-container').style.display = 'none';
                    document.getElementById('musicLibrary').style.display = 'block';
                    loadMusicLibrary();
                    
                    // 隐藏加载提示
                    document.getElementById('loading-overlay').style.opacity = '0';
                    setTimeout(function() {
                        document.getElementById('loading-overlay').style.display = 'none';
                    }, 500);
                }, 800);
            }
        });

        // 音乐数据
        const musicLibrary = [
            { title: '你被写在我的歌里', artist: '鹅鹅鹅', file: 'audio/你被写在我的歌里.mp3' },
            { title: '枫', artist: '鹅鹅鹅', file: 'audio/枫.mp3' },
            { title: '怎么了', artist: '鹅鹅鹅', file: 'audio/怎么了.mp3' },
            { title: '找到你是我最伟大的成功', artist: '鹅鹅鹅', file: 'audio/找到你是我最伟大的成功.mp3' },
            { title: '微微', artist: '鹅鹅鹅', file: 'audio/微微.mp3' },
            { title: '他不懂', artist: '鹅鹅鹅', file: 'audio/他不懂.mp3' },
            { title: '说好的幸福呢', artist: '鹅鹅鹅', file: 'audio/说好的幸福呢.mp3' },
            { title: '如果说', artist: '鹅鹅鹅', file: 'audio/如果说.mp3' },
            { title: '目及皆是你', artist: '鹅鹅鹅', file: 'audio/目及皆是你.mp3' },
            { title: '红尘客栈', artist: '鹅鹅鹅', file: 'audio/红尘客栈.mp3' },
            { title: 'Pinky murder', artist: '鹅鹅鹅', file: 'audio/Pinky murder.mp3' },
            { title: 'A Sad Me In Your Eyes', artist: '鹅鹅鹅', file: 'audio/A Sad Me In Your Eyes.mp3' },
            { title: '鸽子', artist: '鹅鹅鹅', file: 'audio/鸽子.mp3' }
        ];

        // 当前播放状态
        let currentAudio = null;
        let currentCard = null;

        // 加载音乐库
        function loadMusicLibrary() {
            const grid = document.getElementById('musicGrid');
            grid.innerHTML = '';
            
            // 显示加载提示
            document.getElementById('loading-overlay').style.display = 'flex';
            document.getElementById('loading-overlay').style.opacity = '1';
            document.getElementById('loading-text').textContent = '正在加载音乐资源...';

            let loadedCount = 0;
            
            musicLibrary.forEach((music, index) => {
                const card = document.createElement('div');
                card.className = 'music-card';
                card.innerHTML = `
                    <div class="music-info">
                        <h3>${music.title}</h3>
                        <p>${music.artist}</p>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" id="progress-${index}"></div>
                    </div>
                    <div class="controls">
                        <button class="play-btn" id="play-${index}">▶</button>
                        <span class="time-info" id="time-${index}">0:00 / 0:00</span>
                    </div>
                    <div class="volume-control">
                        <span class="volume-icon">🔊</span>
                        <input type="range" class="volume-slider" id="volume-${index}" min="0" max="1" step="0.1" value="0.7">
                    </div>
                `;
                
                // 播放/暂停按钮事件
                const playBtn = card.querySelector(`#play-${index}`);
                const progressBar = card.querySelector(`#progress-${index}`);
                const progressContainer = card.querySelector('.progress-container');
                const timeInfo = card.querySelector(`#time-${index}`);
                const volumeSlider = card.querySelector(`#volume-${index}`);
                
                let audio = new Audio(music.file);
                audio.preload = 'metadata'; // 预加载元数据
                audio.volume = 0.7; // 默认音量
                
                // 音频加载事件
                audio.addEventListener('loadedmetadata', function() {
                    loadedCount++;
                    
                    // 更新时长显示
                    const durationMinutes = Math.floor(audio.duration / 60);
                    const durationSeconds = Math.floor(audio.duration % 60).toString().padStart(2, '0');
                    timeInfo.textContent = `0:00 / ${durationMinutes}:${durationSeconds}`;
                    
                    // 所有音频加载完成后隐藏加载提示
                    if (loadedCount === musicLibrary.length) {
                        document.getElementById('loading-overlay').style.opacity = '0';
                        setTimeout(function() {
                            document.getElementById('loading-overlay').style.display = 'none';
                        }, 500);
                    }
                });
                
                // 点击播放按钮
                playBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    togglePlay(audio, index, card);
                });
                
                // 点击进度条
                progressContainer.addEventListener('click', function(e) {
                    const clickPosition = e.offsetX;
                    const progressWidth = this.clientWidth;
                    const duration = audio.duration || 1;
                    audio.currentTime = (clickPosition / progressWidth) * duration;
                });
                
                // 音量控制
                volumeSlider.addEventListener('input', function() {
                    audio.volume = this.value;
                });
                
                // 更新进度条和时间
                audio.addEventListener('timeupdate', function() {
                    if (!isNaN(audio.duration)) {
                        const progressPercent = (audio.currentTime / audio.duration) * 100;
                        progressBar.style.width = `${progressPercent}%`;
                        
                        // 更新时间显示
                        const currentMinutes = Math.floor(audio.currentTime / 60);
                        const currentSeconds = Math.floor(audio.currentTime % 60).toString().padStart(2, '0');
                        const durationMinutes = Math.floor(audio.duration / 60);
                        const durationSeconds = Math.floor(audio.duration % 60).toString().padStart(2, '0');
                        
                        timeInfo.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
                    }
                });
                
                // 歌曲结束时重置
                audio.addEventListener('ended', function() {
                    playBtn.textContent = '▶';
                    progressBar.style.width = '0%';
                    timeInfo.textContent = `0:00 / ${Math.floor(audio.duration / 60)}:${Math.floor(audio.duration % 60).toString().padStart(2, '0')}`;
                });
                
                grid.appendChild(card);
            });
            
            // 如果加载超时
            setTimeout(function() {
                if (loadedCount < musicLibrary.length) {
                    document.getElementById('loading-overlay').style.opacity = '0';
                    setTimeout(function() {
                        document.getElementById('loading-overlay').style.display = 'none';
                    }, 500);
                }
            }, 5000); // 5秒超时
        }

        // 播放/暂停切换
        function togglePlay(audio, index, card) {
            const playBtn = card.querySelector(`#play-${index}`);
            
            // 如果点击的是当前正在播放的歌曲
            if (currentAudio === audio) {
                if (audio.paused) {
                    audio.play().catch(e => console.log('播放失败:', e));
                    playBtn.textContent = '❚❚';
                } else {
                    audio.pause();
                    playBtn.textContent = '▶';
                }
            } 
            // 如果点击的是其他歌曲
            else {
                // 停止当前播放的歌曲
                if (currentAudio) {
                    currentAudio.pause();
                    if (currentCard) {
                        const prevPlayBtn = currentCard.querySelector('.play-btn');
                        prevPlayBtn.textContent = '▶';
                    }
                }
                
                // 播放新歌曲
                currentAudio = audio;
                currentCard = card;
                audio.currentTime = 0;
                audio.play().catch(e => console.log('播放失败:', e));
                playBtn.textContent = '❚❚';
            }
        }
    </script>
</body>
</html>